<template>
  <view class="about-us-page">
    <!-- 顶部导航栏 -->
    <view class="custom-nav">
      <view class="nav-back" @click="navBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-title">关于我们</view>
      <view class="nav-empty" style="width: 60rpx;"></view>
    </view>

    <scroll-view class="about-scroll" scroll-y>
      <view class="about-container">
        <!-- 公司介绍 -->
        <view class="about-section company-intro">
          <view class="section-logo">
            <image src="/static/images/logo.png" mode="widthFix" class="logo-img"></image>
          </view>
          <view class="company-slogan">让生活更便捷，让服务更贴心</view>
          <view class="company-desc">
            我们成立于2018年，是一家专注于提供优质生活服务的科技企业。秉承"用户至上，服务第一"的理念，我们致力于通过技术创新提升用户的生活品质，打造便捷、高效、可靠的服务平台。
            经过多年的发展，我们已拥有一支由行业精英组成的专业团队，为千万用户提供稳定可靠的服务，赢得了广泛的市场认可和良好的用户口碑。
          </view>
          <view class="company-stats">
            <view class="stat-item">
              <view class="stat-number">1000万+</view>
              <view class="stat-label">注册用户</view>
            </view>
            <view class="stat-item">
              <view class="stat-number">50+</view>
              <view class="stat-label">城市覆盖</view>
            </view>
            <view class="stat-item">
              <view class="stat-number">98%</view>
              <view class="stat-label">用户满意度</view>
            </view>
          </view>
        </view>

        <!-- 我们的团队 -->
        <view class="about-section team-section">
          <view class="section-title">
            <text class="title-text">我们的团队</text>
            <view class="title-line"></view>
          </view>
          <view class="team-members">
            <view class="team-member" v-for="(member, index) in teamMembers" :key="index">
              <view class="member-avatar">
                <image :src="member.avatar" mode="widthFix" class="avatar-img"></image>
              </view>
              <view class="member-name">{{ member.name }}</view>
              <view class="member-position">{{ member.position }}</view>
              <view class="member-desc">{{ member.desc }}</view>
            </view>
          </view>
        </view>

        <!-- 发展历程 -->
        <view class="about-section history-section">
          <view class="section-title">
            <text class="title-text">发展历程</text>
            <view class="title-line"></view>
          </view>
          <view class="timeline">
            <view class="timeline-line"></view>
            <view class="timeline-item" v-for="(item, index) in historyItems" :key="index">
              <view class="timeline-dot"></view>
              <view class="timeline-content">
                <view class="timeline-year">{{ item.year }}</view>
                <view class="timeline-event">{{ item.event }}</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 联系我们 -->
        <view class="about-section contact-section">
          <view class="section-title">
            <text class="title-text">联系我们</text>
            <view class="title-line"></view>
          </view>
          <view class="contact-info">
            <view class="contact-item">
              <view class="contact-icon">📍</view>
              <view class="contact-content">北京市朝阳区科技园区88号创新大厦15层</view>
            </view>
            <view class="contact-item">
              <view class="contact-icon">📞</view>
              <view class="contact-content">400-888-9999</view>
            </view>
            <view class="contact-item">
              <view class="contact-icon">✉️</view>
              <view class="contact-content">contact@example.com</view>
            </view>
            <view class="contact-item">
              <view class="contact-icon">⏰</view>
              <view class="contact-content">工作日 9:00-18:00</view>
            </view>
          </view>
          <view class="contact-map">
            <image src="/static/images/map-placeholder.png" mode="widthFix" class="map-img" @click="openMap"></image>
          </view>
          <view class="contact-buttons">
            <button class="contact-btn" @click="makePhoneCall">
              <text class="btn-icon">📞</text>
              <text class="btn-text">电话联系</text>
            </button>
            <button class="contact-btn" @click="openMap">
              <text class="btn-icon">📍</text>
              <text class="btn-text">查看地图</text>
            </button>
          </view>
        </view>

        <!-- 底部信息 -->
        <view class="footer">
          <view class="footer-logo">
            <image src="/static/images/logo-small.png" mode="widthFix" class="small-logo"></image>
          </view>
          <view class="copyright">© 2023 优服务科技 版权所有</view>
          <view class="icp-info">京ICP备12345678号-1</view>
          <view class="links">
            <text class="link-item" @click="openAgreement">用户协议</text>
            <text class="link-separator">|</text>
            <text class="link-item" @click="openPrivacy">隐私政策</text>
            <text class="link-separator">|</text>
            <text class="link-item" @click="openTerms">服务条款</text>
          </view>
          <view class="social-links">
            <view class="social-icon" @click="openWeibo">
              <text>微博</text>
            </view>
            <view class="social-icon" @click="openWechat">
              <text>微信</text>
            </view>
            <view class="social-icon" @click="openGithub">
              <text>GitHub</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 团队成员
      teamMembers: [
        {
          avatar: '/static/images/team/leader.png',
          name: '张明',
          position: '创始人 & CEO',
          desc: '前互联网巨头产品总监，10年+行业经验，主导多个千万级用户产品'
        },
        {
          avatar: '/static/images/team/tech.png',
          name: '李华',
          position: '技术总监',
          desc: '资深技术专家，曾任职于知名科技公司，负责核心技术架构'
        },
        {
          avatar: '/static/images/team/product.png',
          name: '王芳',
          position: '产品负责人',
          desc: '专注用户体验研究，擅长从用户角度出发打造优质产品'
        }
      ],
      // 发展历程
      historyItems: [
        {
          year: '2018',
          event: '公司成立，推出第一个版本产品，获得天使轮融资'
        },
        {
          year: '2019',
          event: '用户突破100万，完成A轮融资，团队规模扩大至50人'
        },
        {
          year: '2020',
          event: '推出3.0版本，新增多项核心功能，获得行业创新奖'
        },
        {
          year: '2021',
          event: '用户突破500万，完成B轮融资，拓展至3个新城市'
        },
        {
          year: '2022',
          event: '推出企业版服务，与多家知名企业达成合作'
        },
        {
          year: '2023',
          event: '用户突破千万，完成C轮融资，启动国际化战略'
        }
      ]
    };
  },
  methods: {
    // 返回上一页
    navBack() {
      uni.navigateBack({ delta: 1 });
    },
    // 拨打电话
    makePhoneCall() {
      uni.makePhoneCall({
        phoneNumber: '400-888-9999'
      });
    },
    // 打开地图
    openMap() {
      uni.openLocation({
        latitude: 39.908823,
        longitude: 116.397470,
        name: '优服务科技',
        address: '北京市朝阳区科技园区88号创新大厦15层',
        scale: 18
      });
    },
    // 发送邮件
    sendEmail() {
      uni.navigateTo({
        url: '/pages/contact/email'
      });
    },
    // 打开用户协议
    openAgreement() {
      uni.navigateTo({
        url: '/pages/about/agreement'
      });
    },
    // 打开隐私政策
    openPrivacy() {
      uni.navigateTo({
        url: '/pages/about/privacy'
      });
    },
    // 打开服务条款
    openTerms() {
      uni.navigateTo({
        url: '/pages/about/terms'
      });
    },
    // 打开社交媒体
    openWeibo() {
      uni.showToast({
        title: '微博账号：优服务科技',
        icon: 'none'
      });
    },
    openWechat() {
      uni.previewImage({
        urls: ['/static/images/wechat-qrcode.png'],
        current: '/static/images/wechat-qrcode.png'
      });
    },
    openGithub() {
      uni.navigateTo({
        url: '/pages/webview?url=https://github.com'
      });
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary: #165DFF;
$primary-light: #E8F3FF;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$bg: #F5F7FA;
$card: #FFFFFF;
$border: #E5E6EB;
$shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);

.about-us-page {
  background-color: $bg;
  min-height: 100vh;
  padding-top: var(--status-bar-height);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// 自定义导航栏
.custom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: $card;
  box-shadow: $shadow;
  
  .nav-back {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    
    &:hover {
      background-color: $bg;
    }
  }
  
  .back-icon {
    font-size: 45rpx;
    color: $text-primary;
  }
  
  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: $text-primary;
  }
}

// 滚动区域
.about-scroll {
  width: 100%;
  height: calc(100vh - var(--status-bar-height) - 90rpx);
}

// 内容容器
.about-container {
  padding: 0 30rpx 50rpx;
}

// 通用区块样式
.about-section {
  background-color: $card;
  border-radius: 18rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 24rpx;
  box-shadow: $shadow;
  transition: transform 0.3s ease;
  
  &:hover {
    transform: translateY(-4rpx);
  }
}

// 区块标题
.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 36rpx;
  
  .title-text {
    font-size: 32rpx;
    font-weight: 600;
    color: $text-primary;
    margin-right: 16rpx;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -8rpx;
      width: 100%;
      height: 6rpx;
      background-color: $primary-light;
      border-radius: 3rpx;
    }
  }
  
  .title-line {
    flex: 1;
    height: 2rpx;
    background-color: $border;
  }
}

// 公司介绍
.company-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60rpx 30rpx;
  
  .section-logo {
    margin-bottom: 36rpx;
    
    .logo-img {
      width: 220rpx;
    }
  }
  
  .company-slogan {
    font-size: 30rpx;
    font-weight: 600;
    color: $primary;
    margin-bottom: 28rpx;
    letter-spacing: 1rpx;
  }
  
  .company-desc {
    font-size: 26rpx;
    color: $text-secondary;
    line-height: 1.7;
    max-width: 800rpx;
    margin-bottom: 40rpx;
    padding: 0 20rpx;
  }
  
  .company-stats {
    display: flex;
    justify-content: center;
    gap: 40rpx;
    margin-top: 20rpx;
    
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 20rpx;
      
      .stat-number {
        font-size: 34rpx;
        font-weight: 700;
        color: $primary;
        margin-bottom: 10rpx;
      }
      
      .stat-label {
        font-size: 24rpx;
        color: $text-tertiary;
      }
    }
  }
}

// 团队展示
.team-section {
  
  .team-members {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 30rpx;
  }
  
  .team-member {
    width: 280rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20rpx;
    border-radius: 12rpx;
    transition: all 0.3s;
    
    &:hover {
      background-color: $primary-light;
      transform: translateY(-6rpx);
      box-shadow: 0 8rpx 20rpx rgba(22, 93, 255, 0.1);
    }
    
    .member-avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 20rpx;
      border: 6rpx solid $primary-light;
      
      .avatar-img {
        width: 100%;
        height: 100%;
      }
    }
    
    .member-name {
      font-size: 28rpx;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 8rpx;
    }
    
    .member-position {
      font-size: 24rpx;
      color: $primary;
      margin-bottom: 12rpx;
    }
    
    .member-desc {
      font-size: 22rpx;
      color: $text-tertiary;
      line-height: 1.6;
    }
  }
}

// 发展历程
.history-section {
  
  .timeline {
    position: relative;
    padding-left: 40rpx;
    padding-top: 10rpx;
  }
  
  .timeline-line {
    position: absolute;
    top: 0;
    left: 16rpx;
    width: 2rpx;
    height: 100%;
    background-color: $primary-light;
  }
  
  .timeline-item {
    position: relative;
    margin-bottom: 40rpx;
    padding-bottom: 10rpx;
    
    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
    }
    
    .timeline-dot {
      position: absolute;
      top: 6rpx;
      left: -40rpx;
      width: 34rpx;
      height: 34rpx;
      border-radius: 50%;
      background-color: $card;
      border: 4rpx solid $primary;
      z-index: 2;
      transition: transform 0.3s;
      
      &:hover {
        transform: scale(1.2);
      }
    }
    
    .timeline-content {
      padding-left: 20rpx;
      
      .timeline-year {
        font-size: 26rpx;
        font-weight: 600;
        color: $primary;
        margin-bottom: 8rpx;
      }
      
      .timeline-event {
        font-size: 24rpx;
        color: $text-secondary;
        line-height: 1.6;
        padding: 16rpx 20rpx;
        background-color: $primary-light;
        border-radius: 12rpx;
        position: relative;
        
        &::before {
          content: '';
          position: absolute;
          top: 20rpx;
          left: -10rpx;
          width: 20rpx;
          height: 20rpx;
          background-color: $primary-light;
          transform: rotate(45deg);
          z-index: 1;
        }
      }
    }
  }
}

// 联系我们
.contact-section {
  
  .contact-info {
    margin-bottom: 40rpx;
  }
  
  .contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 28rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .contact-icon {
      font-size: 32rpx;
      color: $primary;
      margin-right: 20rpx;
      margin-top: 4rpx;
      min-width: 32rpx;
      text-align: center;
    }
    
    .contact-content {
      font-size: 26rpx;
      color: $text-secondary;
      line-height: 1.6;
    }
  }
  
  .contact-map {
    margin-bottom: 40rpx;
    border-radius: 12rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    
    .map-img {
      width: 100%;
      height: 300rpx;
    }
  }
  
  .contact-buttons {
    display: flex;
    justify-content: space-around;
    gap: 20rpx;
  }
  
  .contact-btn {
    flex: 1;
	
    height: 80rpx;
    line-height: 80rpx;
    background-color: $primary-light;
    color: $primary;
    border: 1px solid $primary;
    border-radius: 12rpx;
    font-size: 26rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
    transition: all 0.2s;
    
    &:hover {
      background-color: $primary;
      color: white;
    }
    
    .btn-icon {
      font-size: 28rpx;
    }
  }
}

// 底部信息
.footer {
  background-color: $card;
  border-radius: 18rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 24rpx;
  box-shadow: $shadow;
  text-align: center;
  
  .footer-logo {
    margin-bottom: 20rpx;
    
    .small-logo {
      width: 160rpx;
    }
  }
  
  .copyright {
    font-size: 24rpx;
    color: $text-tertiary;
    margin-bottom: 10rpx;
  }
  
  .icp-info {
    font-size: 22rpx;
    color: $text-tertiary;
    margin-bottom: 24rpx;
  }
  
  .links {
    display: flex;
    justify-content: center;
    margin-bottom: 30rpx;
    flex-wrap: wrap;
    
    .link-item {
      font-size: 24rpx;
      color: $primary;
      margin: 0 10rpx;
      transition: color 0.2s;
      
      &:hover {
        color: #0E42D2;
        text-decoration: underline;
      }
    }
    
    .link-separator {
      font-size: 24rpx;
      color: $border;
    }
  }
  
  .social-links {
    display: flex;
    justify-content: center;
    gap: 30rpx;
    
    .social-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background-color: $primary-light;
      color: $primary;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      
      &:hover {
        background-color: $primary;
        color: white;
        transform: translateY(-4rpx);
      }
    }
  }
}
</style>
    